import {
  Line,
  LineByCanvas
} from "./line.js";
import {
  Point,
  PointByCanvas
} from "./point.js";
import {
  Polygon,
  PolygonByCanvas
} from "./polygon.js";
import {
  render as webglPolygonRender
} from './testPolygon.js';
import {
  Text,
  TextCanvas
} from "./text.js";

$('.collapse').collapse();


document.querySelector('#lineStyle').addEventListener('change', e => {
  let lineType = e.target.value;
  if (lineType && lineType == 'dashArray') {
    document.getElementById('dash-array-line-dash').classList.remove('dash-array-line-dash-display');
    return;
  }
  document.getElementById('dash-array-line-dash').classList.add('dash-array-line-dash-display');
})

const lineHandle = (e, isWebgl = true) => {
  let lineStyle = {};
  lineStyle['lineStyle'] = document.getElementById('lineStyle').value == '' ? 'General' : document.getElementById('lineStyle').value
  lineStyle['lineCap'] = document.getElementById('lineCap').value == '' ? 'round' : document.getElementById('lineCap').value
  lineStyle['lineJoin'] = document.getElementById('lineJoin').value == '' ? 'round' : document.getElementById('lineJoin').value
  let lineSize = document.getElementById('lineSize').value;
  let pathNumber = document.getElementById('pathNumber').value;
  let pathPointNum = document.getElementById('pathPointNum').value;
  lineStyle.solidLength = Number(document.getElementById('solidLength').value);
  lineStyle.emptyLength = Number(document.getElementById('emptyLength').value);
  if (isWebgl) {
    let line = new Line(document.getElementById('webgl'));
    let now = new Date().getTime();
    line.render(lineSize, pathNumber, pathPointNum, lineStyle)
    document.getElementById('webglTime').innerHTML = (new Date().getTime() - now) + 'ms';
  } else {
    let now = new Date().getTime();
    let lineByCanvas = new LineByCanvas(document.getElementById('canvas'));
    lineByCanvas.render(lineSize, pathNumber, pathPointNum, lineStyle)
    document.getElementById('canvasTime').innerHTML = (new Date().getTime() - now) + 'ms';
  }
}

const polygonHandle = (e, isWebgl = true) => {
  let form = document.getElementById('polygon-form');
  let polygonNumber = form.querySelector('[data-tag=polygonNumber]').value;
  let pointNumForEachPolygon = form.querySelector('[data-tag=pointNumForEachPolygon]').value;
  polygonNumber = Number(polygonNumber);
  pointNumForEachPolygon = Number(pointNumForEachPolygon);
  if (polygonNumber <= 0 || pointNumForEachPolygon <= 2) {
    alert('the params are not current,maybe the point number for each polygon is below 3');
    return;
  }
  if (isWebgl) {
    let data = [];
    const getRandomNum = () => {
      if (Math.random() < 0.5) {
        return -1 * Math.random();
      } else {
        return Math.random();
      }
    }
    let averageAngle = 2 * Math.PI / pointNumForEachPolygon;
    for (let i = 0; i < polygonNumber; i++) {
      let centerPoint = [getRandomNum() * 0.5, getRandomNum() * 0.5];
      let p2 = [getRandomNum(), getRandomNum()];
      p2 = [(centerPoint[0] + p2[0]) / 4, (centerPoint[1] + p2[1]) / 4];
      let data2 = [...p2];
      for (let i = 1; i < pointNumForEachPolygon; i++) {
        data2.push((p2[0] - centerPoint[0]) * Math.cos(averageAngle * i) - (p2[1] - centerPoint[1]) * Math.sin(averageAngle * i) + centerPoint[0],
          (p2[0] - centerPoint[0]) * Math.sin(averageAngle * i) + (p2[1] - centerPoint[1]) * Math.cos(averageAngle * i) + centerPoint[1]);
      }
      data.push(data2);
    }
    let now = new Date().getTime();

    webglPolygonRender(document.getElementById('webgl'), data);
    document.getElementById('webglTime').innerHTML = (new Date().getTime() - now) + 'ms';
  } else {
    let now = new Date().getTime();
    let polygonByCanvas = new PolygonByCanvas(document.getElementById('canvas'));
    polygonByCanvas.render(polygonNumber, pointNumForEachPolygon);
    document.getElementById('canvasTime').innerHTML = (new Date().getTime() - now) + 'ms';
  }
}

const pointHandle = (e, isWebgl = true) => {
  let pointNumber = document.getElementById('pointNumber').value;
  let pointSize = document.getElementById('pointSize').value;
  let pointShape = document.getElementById('pointShape').value == '' ? 'square' : document.getElementById('pointShape').value
  if (isWebgl) {
    let now = new Date().getTime();
    let point = new Point(document.getElementById('webgl'));
    point.render(pointNumber, pointSize, pointShape)
    document.getElementById('webglTime').innerHTML = (new Date().getTime() - now) + 'ms';
  } else {
    let now = new Date().getTime();
    let pointByCanvas = new PointByCanvas(document.getElementById('canvas'))
    pointByCanvas.render(pointNumber, pointSize, pointShape)
    document.getElementById('canvasTime').innerHTML = (new Date().getTime() - now) + 'ms';
  }
}

const textHandle = (e, isWebgl = true) => {
  let form = document.getElementById('text-form');
  let textContent = form.querySelector('[data-tag=textContent]').value;
  let textNumber = Number(form.querySelector('[data-tag=textNumber]').value);
  let lineWarpWidth = Number(form.querySelector('[data-tag=lineWarpWidth]').value);
  let fontSize = Number(form.querySelector('[data-tag=fontSize]').value);
  if (fontSize > lineWarpWidth) {
    alert('font size should be smaller than line warp width!');
    return;
  }
  if (isWebgl) {
    let text = new Text(document.getElementById('webgl'));
    let now = new Date().getTime();
    let positionData = [];
    for (let j = 0, length = 2 * (textNumber >= 1 ? textNumber : 2); j < length; j++) {
      if (Math.random() < 0.5) {
        positionData.push((-1) * Math.random());
      } else {
        positionData.push(Math.random());
      }
    }
    for (let i = 0, length = positionData.length; i < length; i += 2) {
      text.render(positionData[i], positionData[i + 1], {
        text: textContent,
        fontSize: fontSize,
        lineWarpWidth: lineWarpWidth
      });
    }
    document.getElementById('webglTime').innerHTML = (new Date().getTime() - now) + 'ms';
  } else {
    let canvas = document.getElementById('canvas')
    let text = new TextCanvas(canvas);
    let width = canvas.width;
    let height = canvas.height;
    let now = new Date().getTime();
    text.render(textNumber, {
      text: textContent,
      fontSize: fontSize,
      lineWarpWidth: lineWarpWidth
    });
    document.getElementById('canvasTime').innerHTML = (new Date().getTime() - now) + 'ms';
  }
}

document.getElementById('accordion').addEventListener('click', e => {
  switch (e.target.parentNode.getAttribute('data-type')) {
    case 'polygon-form':
      {
        if (e.target.getAttribute('data-button-type') === 'Webgl') {
          polygonHandle(e, true);
        } else {
          polygonHandle(e, false);
        }
        break;
      }

    case 'point-form':
      {
        if (e.target.getAttribute('data-button-type') === 'Webgl') {
          pointHandle(e, true)

        } else {
          pointHandle(e, false)
        }
        break;
      }

    case 'line-form':
      {
        if (e.target.getAttribute('data-button-type') === 'Webgl') {
          lineHandle(e, true);
        } else {
          lineHandle(e, false);
        }
        break;
      }

    case 'text-form':
      {
        if (e.target.getAttribute('data-button-type') === 'Webgl') {
          textHandle(e, true);
        } else {
          textHandle(e, false);
        }
        break;
      }
    default:
      {
        // textHandle(e);
      }
  }

})